<template>
  <div class="layout-page">
    <router-view/>

    <van-tabbar v-model="active">
      <van-tabbar-item v-for="(item) in datas" :key="item.id" :icon="item.icon" :to="item.path">{{ item.name }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'LayoutPage',
  data () {
    return {
      active: 0,
      datas: [
        { id: 1, path: '/article', name: '面经', icon: 'fire-o' },
        { id: 2, path: '/collect', name: '收藏', icon: 'star-o' },
        { id: 3, path: '/like', name: '点赞', icon: 'like-o' },
        { id: 4, path: '/user', name: '我的', icon: 'user-o' }
      ]

    }
  },
  watch: {
    $route (to) {
      const selIndex = this.datas.findIndex(item => item.path === to.path)
      this.active = selIndex === -1 ? 0 : selIndex
    }
  }
}
</script>

<style lang="less" scoped></style>
